<template>
  <div class="bigBox">
    <div class="xx">
      <div class="zhengti">
        <span class="zuo"><img src="https://chl-bucket.oss-cn-hangzhou.aliyuncs.com/icon/icon/renshu.png" alt=""></span>
        <div class="you">
          <span><b>用户量</b></span>
          <div>35</div>
        </div>
      </div>
      <div class="zhengti">
        <span class="zuo"><img src="https://chl-bucket.oss-cn-hangzhou.aliyuncs.com/md/202206061409601.png" alt=""></span>
        <div class="you">
          <span><b>物业费</b></span>
          <div>1600元</div>
        </div>
      </div>
      <div class="zhengti">
        <span class="zuo"><img src="https://chl-bucket.oss-cn-hangzhou.aliyuncs.com/md/202206061409227.png" alt=""></span>
        <div class="you">
          <span><b>报修消息</b></span>
          <div>18</div>
        </div>
      </div>
      <div class="zhengti">
        <span class="zuo"><img src="https://chl-bucket.oss-cn-hangzhou.aliyuncs.com/md/202206061411671.png" alt=""></span>
        <div class="you">
          <span><b>投诉数量</b></span>
          <div>72</div>
        </div>
      </div>
    </div>
    <div class="yy">
      <div class="jiazi box">
        <div id="myChart" :style="{ width: '500px', height: '625px' }" />
        <div id="myinitcategory" :style="{ width: '500px', height: '625px' }" />
        <div id="initleida" :style="{ width: '500px', height: '625px' }" />
      </div>
    </div>
  </div>
</template>

<script>
const echarts = require('echarts')
export default {

  data() {},

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    this.$nextTick(() => {
      this.initcategory()
    })
    this.$nextTick(() => {
      this.initleida()
    })
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('myChart'))
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '手机端' },
              { value: 735, name: '小程序' },
              { value: 580, name: '网页端' },
              { value: 484, name: 'uniapp' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    initcategory() {
      const charts = echarts.init(document.getElementById('myinitcategory'))
      charts.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      })
    },
    initleida() {
      const charts = echarts.init(document.getElementById('initleida'))
      charts.setOption({
        legend: {
          data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss">
.bigBox{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  .xx{
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .zhengti{
    padding: 24.3px 96px 24.3px 32px;
    border: 1px #ccc solid;
    box-shadow: -1px -1px 10px 0px #ccc;
    margin-bottom: 50px;
    }
     .zuo{
    float: left;
    margin-right: 10px;
    img{
      width: 50px;
    }
  }
  .you{
    display: flex;
    float: right;
    flex-direction: column;
    margin-left: 10px;

     div{
      text-align: center;
      padding-top: 5px;
      font-size: 14px;
     }
 }
  }
.yy{
    margin-top: 50px;
    padding: 10px;
    width: 97%;
    height: 100%;
    margin: 0 auto;
    .jiazi{
      display: flex;
    justify-content: space-evenly;
    }
}
.box {
   position: relative;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5em;
    background: #fff;
    font-family: sans-serif;
    line-height: 1.5em;
    text-align: center;
    border-radius: 0.2em;
    animation: animate_text 2s linear infinite alternate;
}
.box::after {
    content: '';
    position: absolute;
    width: 100.5%;
    height: 101%;
    z-index: -1;
    border-radius: 0.2em;

}

.box::after {
    background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
}

.box::after {
    background-size: 300%, 300%;
    animation: animate_bg 5s ease infinite alternate;
}

@keyframes animate_bg {
    0% {
        background-position: 0%, 50%;
    }

    50% {
        background-position: 100%, 50%;
    }

    100% {
        background-position: 0%, 50%;
    }
}

@keyframes animate_text {
    from {
        color: lime;
    }

    to {
        color: yellow;
    }
}
}
</style>
